<d-layout class="admin-layout">
  <!-- Header -->
  <d-header class="admin-header">
    <div class="header-content">
      <h1 class="app-title">{{ i18n.t('app.title') }}</h1>
      <div class="header-actions">
        <div class="language-switcher">
          <label>{{ i18n.t('app.language') }}:</label>
          <select class="language-select" [(ngModel)]="currentLanguage" (change)="changeLanguage(currentLanguage)">
            <option *ngFor="let lang of languages" [value]="lang.value">
              {{ lang.label }}
            </option>
          </select>
        </div>
      </div>
    </div>
  </d-header>

  <!-- Content -->
  <d-content class="admin-content">
    <div class="content-wrapper">
      <!-- Page Header -->
      <div class="page-header">
        <h2>{{ i18n.t('product.title') }}</h2>
      </div>

      <!-- Toolbar -->
      <div class="toolbar">
        <div class="toolbar-left">
          <d-button bsStyle="primary" (click)="openAddModal()">
            <span class="icon-add"></span>
            {{ i18n.t('product.add') }}
          </d-button>
        </div>
        <div class="toolbar-right">
          <input 
            type="text" 
            class="search-input"
            [(ngModel)]="searchText" 
            (input)="onSearch()"
            [placeholder]="i18n.t('product.search')"
          />
        </div>
      </div>

      <!-- Data Table -->
      <div class="table-container">
        <table class="simple-table">
          <thead>
            <tr>
              <th>{{ i18n.t('product.id') }}</th>
              <th>{{ i18n.t('product.name') }}</th>
              <th>{{ i18n.t('product.category') }}</th>
              <th>{{ i18n.t('product.price') }}</th>
              <th>{{ i18n.t('product.stock') }}</th>
              <th>{{ i18n.t('product.status') }}</th>
              <th>{{ i18n.t('product.description') }}</th>
              <th>{{ i18n.t('product.actions') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let product of filteredProducts">
              <td>{{ product.id }}</td>
              <td><strong>{{ product.name }}</strong></td>
              <td>{{ product.category }}</td>
              <td><span class="price">¥{{ product.price }}</span></td>
              <td><span [class.low-stock]="product.stock < 10">{{ product.stock }}</span></td>
              <td>
                <span 
                  class="status-badge" 
                  [class.status-active]="product.status === 'active'"
                  [class.status-inactive]="product.status === 'inactive'">
                  {{ getStatusLabel(product.status) }}
                </span>
              </td>
              <td><span class="description">{{ product.description }}</span></td>
              <td>
                <div class="action-buttons">
                  <button class="btn-edit" (click)="openEditModal(product)">
                    {{ i18n.t('product.edit') }}
                  </button>
                  <button class="btn-delete" (click)="deleteProduct(product)">
                    {{ i18n.t('product.delete') }}
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Table Footer -->
      <div class="table-footer">
        <span>{{ i18n.t('product.total', [filteredProducts.length]) }}</span>
      </div>
    </div>
  </d-content>
</d-layout>

<!-- Product Form Modal -->
<div class="modal-overlay" *ngIf="showProductModal" (click)="closeModal()">
  <div class="modal-container" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <h3>{{ isEditMode ? i18n.t('product.edit') : i18n.t('product.add') }}</h3>
      <button class="close-btn" (click)="closeModal()">&times;</button>
    </div>
    
    <div class="modal-body">
    <form class="product-form">
      <div class="form-group">
        <label class="form-label required">{{ i18n.t('product.name') }}</label>
        <input 
          type="text" 
          class="form-control"
          [(ngModel)]="productForm.name"
          name="name"
          [placeholder]="i18n.t('product.name')"
        />
      </div>

      <div class="form-group">
        <label class="form-label required">{{ i18n.t('product.category') }}</label>
        <d-select 
          [(ngModel)]="productForm.category"
          [options]="categories"
          name="category"
          optionImmutableKey="value">
        </d-select>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label class="form-label required">{{ i18n.t('product.price') }}</label>
          <d-input-number
            [(ngModel)]="productForm.price"
            name="price"
            [min]="0"
            [step]="1"
            [placeholder]="i18n.t('product.price')">
          </d-input-number>
        </div>

        <div class="form-group">
          <label class="form-label required">{{ i18n.t('product.stock') }}</label>
          <d-input-number
            [(ngModel)]="productForm.stock"
            name="stock"
            [min]="0"
            [step]="1"
            [placeholder]="i18n.t('product.stock')">
          </d-input-number>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">{{ i18n.t('product.status') }}</label>
        <d-select 
          [(ngModel)]="productForm.status"
          [options]="statusOptions"
          name="status"
          optionImmutableKey="value">
        </d-select>
      </div>

      <div class="form-group">
        <label class="form-label">{{ i18n.t('product.description') }}</label>
        <textarea 
          class="form-control"
          [(ngModel)]="productForm.description"
          name="description"
          rows="4"
          [placeholder]="i18n.t('product.description')">
        </textarea>
      </div>
    </form>
    </div>
    
    <div class="modal-footer">
      <d-button bsStyle="common" (click)="closeModal()">
        {{ i18n.t('form.cancel') }}
      </d-button>
      <d-button bsStyle="primary" (click)="submitForm()">
        {{ i18n.t('form.submit') }}
      </d-button>
    </div>
  </div>
</div>

<router-outlet />

<!-- AI 助手 -->
<app-ai-assistant></app-ai-assistant>
